<!DOCTYPE html>
<html lang="en">
<head>
	<title>Blockbench</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="theme-color" content="#181a1f">
	<meta name="robots" content="noindex">
	<!--link rel="manifest" href="manifest.json"-->
	<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
	<link rel="stylesheet" href="css/w3.css">
	<link rel="stylesheet" href="css/jquery-ui.min.css">
	<link rel="stylesheet" href="css/fontawesome.css">
	<link rel="stylesheet" href="css/spectrum.css">
	<link rel="stylesheet" href="css/prism.css">
	<link rel="stylesheet" href="css/setup.css">
	<link rel="stylesheet" href="css/general.css">
	<link rel="stylesheet" href="css/window.css">
	<link rel="stylesheet" href="css/panels.css">
	<link rel="stylesheet" href="css/dialogs.css">
	<style type="text/css" id="theme_css"></style>
</head>
<body spellcheck="false">
	<script>
		if (typeof module === 'object') {window.module = module; module = undefined;}//jQuery Fix
		const isApp = typeof require !== 'undefined';
		const appVersion = '3.6.3';
	</script>
	<div id="loading_error_message" style="display: none;">
		<div>An error occurred while loading Blockbench</div>
		<div id="loading_error_detail"></div>
		<button onclick="isApp ? Blockbench.reload() : window.location.reload(true)" class="large" style="margin-right: auto; margin-left: auto;">Reload</button>
		<button onclick="window.close()" class="large" style="margin-right: auto; margin-left: auto;">Quit</button>
	</div>
		<script src="lib/vue.min.js"></script>
		<script src="lib/vue_sortable.js"></script>
		<script src="lib/jquery.js"></script>
		<script src="lib/jquery-ui.min.js"></script>
		<script src="lib/targa.js"></script>
		<script src="lib/jimp.min.js"></script>
		<script src="lib/jszip.min.js"></script>
		<script src="lib/gif.js"></script>
		<script src="lib/prism.js"></script>
		<script src="lib/VuePrismEditor.min.js"></script>
		<script src="lib/lzutf8.js"></script>
		<script src="lib/peer.min.js"></script>
		<script src="lib/marked.min.js"></script>
		<script src="lib/spectrum.js"></script>
		<script src="lib/three.min.js"></script>
		<script src="lib/three_custom.js"></script>
		<script src="lib/GLTFExporter.js"></script>
		<script src="lib/CanvasFrame.js"></script>
		<!--script src="lib/fik.min.js"></script-->
		<script src="lib/molang.js"></script>
		<script src="js/preview/OrbitControls.js"></script>
		<script src="js/outliner/tree.vue.js"></script>
		
		<script src="js/util.js"></script>
		<script src="js/property.js"></script>
		<script src="js/interface/language.js"></script>
		<script src="js/interface/menu.js"></script>
		<script src="js/interface/actions.js"></script>
		<script src="js/interface/themes.js"></script>
		<script src="js/blockbench.js"></script>
		<script src="js/modes.js"></script>
		<script src="js/interface/keyboard.js"></script>
		<script src="js/interface/settings.js"></script>
		<script src="js/interface/dialog.js"></script>
		<script src="js/copy_paste.js"></script>
		<script src="js/undo.js"></script>
		<script src="js/edit_sessions.js"></script>

		<script type="text/javascript">
			if (isApp === true) {
				document.write("<script src='js/desktop.js'><\/script>");
			} else {
				document.write("<script src='js/web.js'><\/script>");
			}
		</script>

		<script src="js/api.js"></script>
		<script src="js/outliner/outliner.js"></script>
		<script src="js/outliner/group.js"></script>
		<script src="js/outliner/cube.js"></script>
		<script src="js/outliner/locator.js"></script>
		<script src="js/preview/preview.js"></script>
		<script src="js/preview/canvas.js"></script>
		<script src="js/preview/transformer.js"></script>
		<script src="js/transform.js"></script>
		<script src="js/texturing/textures.js"></script>
		<script src="js/texturing/uv.js"></script>
		<script src="js/interface/panels.js"></script>
		<script src="js/interface/interface.js"></script>
		<script src="js/texturing/painter.js"></script>
		<script src="js/texturing/texture_generator.js"></script>
		<script src="js/texturing/color.js"></script>
		<script src="js/display_mode.js"></script>
		<script src="js/animations.js"></script>
		<script src="js/plugin_loader.js"></script>

		<script src="js/io/project.js"></script>
		<script src="js/io/io.js"></script>
		<script src="js/io/formats/bbmodel.js"></script>
		<script src="js/io/formats/java_block.js"></script>
		<script src="js/io/formats/bedrock.js"></script>
		<script src="js/io/formats/bedrock_old.js"></script>
		<script src="js/io/formats/obj.js"></script>
		<script src="js/io/formats/gltf.js"></script>
		<script src="js/io/formats/modded_entity.js"></script>
		<script src="js/io/formats/optifine_jem.js"></script>
		<script src="js/io/formats/optifine_jpm.js"></script>
		<script src="js/io/formats/skin.js"></script>

		<script>if (window.module) module = window.module;</script>

	<div style="display: none;"></div>

	<div id="overlay_message_box" style="display: none;">
		<div>
			<h3><i class="material-icons">keyboard</i><span class="tl">keybindings.recording</span></h3>
			<p class="tl">keybindings.press</p>
			<button class="tl" onclick="Keybinds.recording.stopRecording()">dialog.cancel</button>
			<button class="tl" onclick="Keybinds.recording.clear().stopRecording()">keybindings.clear</button>
			<div id="keybind_input_box" contenteditable="true" style="font-size: 0"></div>
		</div>
	</div>

	<dialog class="dialog draggable paddinged" id="updater">
		<div class="dialog_handle tl">dialog.update.title</div>
		<h1></h1>

		<div id="updater_content"></div>

		<div class="progress_bar" id="update_bar">
			<div class="progress_bar_inner"></div>
		</div>
		<div class="dialog_bar button_bar" hidden>
			<button type="button" class="cancel_btn confirm_btn uc_btn tl" onclick="hideDialog()">dialog.close</button>
		</div>
		<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
	</dialog>

	<dialog class="dialog draggable paddinged" id="plugins">
		<div class="dialog_handle tl">dialog.plugins.title</div>

		<div class="bar next_to_title" id="plugins_header_bar"></div>

		<div class="bar">
			<div class="tab_bar">
				<div class="open tl" onclick="switchPluginTabs(true)" id="installed_plugins">dialog.plugins.installed</div>
				<div class="tl" onclick="switchPluginTabs(false)" id="all_plugins">dialog.plugins.available</div>
			</div>
			<div class="search_bar">
				<input type="text" class="dark_bordered" id="plugin_search_bar" oninput="Plugins.updateSearch()">
				<i class="material-icons" id="plugin_search_bar_icon">search</i>
			</div>
		</div>
		<ul class="list" id="plugin_list">
			<li v-for="plugin in plugin_search" v-bind:plugin="plugin.id" v-bind:class="{testing: plugin.fromFile, expanded: plugin.expanded}">
				<div class="title" v-on:click="plugin.toggleInfo()">
					<div class="icon_wrapper plugin_icon normal" v-html="Blockbench.getIconNode(plugin.icon, plugin.color).outerHTML"></div>

					<i v-if="plugin.expanded" class="material-icons plugin_expand_icon">expand_less</i>
					<i v-else class="material-icons plugin_expand_icon">expand_more</i>
					{{ plugin.title }}
				</div>
				<div class="button_bar" v-if="plugin.installed || plugin.isInstallable() == true">
					<button type="button" class="" v-on:click="plugin.uninstall()" v-if="plugin.installed"><i class="material-icons">delete</i><span class="tl">dialog.plugins.uninstall</span></button>
					<button type="button" class="" v-on:click="plugin.download(true)" v-else><i class="material-icons">add</i><span class="tl">dialog.plugins.install</span></button>
					<button type="button" v-on:click="plugin.reload()" v-if="plugin.installed && plugin.isReloadable()"><i class="material-icons">refresh</i><span class="tl">dialog.plugins.reload</span></button>
				</div>
				<div class="button_bar tiny tl" v-else>{{ plugin.isInstallable() }}</div>

				<div class="author">{{ tl('dialog.plugins.author', [plugin.author]) }}</div>
				<div class="description">{{ plugin.description }}</div>
				<div v-if="plugin.expanded" class="about" v-html="marked(plugin.about)"><button>a</button></div>
				<div v-if="plugin.expanded" class="tl" v-on:click="plugin.toggleInfo()" style="text-decoration: underline;">dialog.plugins.show_less</div>
			</li>
			<div class="no_plugin_message tl" v-if="plugin_search.length < 1 && showAll === false">dialog.plugins.none_installed</div>
			<div class="no_plugin_message tl" v-if="plugin_search.length < 1 && showAll === true" id="plugin_available_empty">dialog.plugins.none_available</div>
		</ul>

		<div class="dialog_bar button_bar" hidden>
			<button type="button" class="cancel_btn confirm_btn uc_btn tl" onclick="hideDialog();">dialog.close</button>
		</div>
		<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
	</dialog>

	<dialog class="dialog draggable paddinged" id="edit_sessions">
		<div class="dialog_handle tl">dialog.edit_session.title</div>

		<div class="dialog_bar">
			<label class="name_space_left tl">edit_session.username</label>
			<input type="text" class="dark_bordered half" id="edit_session_username">
		</div>
		<div class="dialog_bar">
			<label class="name_space_left tl">edit_session.token</label>
			<input type="text" class="dark_bordered half f_left" id="edit_session_token">
			<div id="edit_session_copy_button" class="tool" onclick="EditSession.copyToken()"><div class="tooltip tl">action.paste</div><i class="fa fa_big fa-clipboard"></i></div>
		</div>
		<div class="edit_session_inactive">
			<p class="tl">edit_session.about</p>
		</div>
		<div class="edit_session_active hidden">
			<p><b class="tl">edit_session.status</b>: <span class="tl" id="edit_session_status">edit_session.connected</span></p>
		</div>

		<div class="dialog_bar button_bar">
			<button type="button" class="edit_session_inactive confirm_btn tl" onclick="EditSession.join();">edit_session.join</button>
			<button type="button" class="edit_session_inactive tl" onclick="EditSession.start();">edit_session.create</button>
			<button type="button" class="edit_session_active tl" onclick="EditSession.quit();">edit_session.quit</button>
			<button type="button" class="cancel_btn tl" onclick="hideDialog();">dialog.cancel</button>
		</div>
		<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
	</dialog>

	<dialog class="dialog draggable paddinged" id="toolbar_edit">
		<div class="dialog_handle tl">dialog.toolbar_edit.title</div>

		<ul class="bar" id="bar_items_current" v-sortable="{onChoose: choose, onUpdate: sort, onEnd: drop, animation: 160 }">
			<li v-for="item in currentBar" v-bind:title="item.name" :key="item.id||item">
				<div v-if="typeof item === 'string'" class="toolbar_separator"></div>
				<div v-else class="tool">
					<div class="tooltip">{{item.name + (BARS.condition(item.condition) ? '' : ' (' + tl('dialog.toolbar_edit.hidden') + ')' )}}</div>
					<span class="icon_wrapper" v-bind:style="{opacity: BARS.condition(item.condition) ? 1 : 0.4}" v-html="Blockbench.getIconNode(item.icon, item.color).outerHTML"></span>
				</div>
			</li> 
		</ul>

		<div class="bar">
			<div class="search_bar">
				<input type="text" class="dark_bordered" id="action_search_bar" oninput="BARS.list.updateSearch()">
				<i class="material-icons" id="plugin_search_bar_icon">search</i>
			</div>
		</div>

		<ul class="list" id="bar_item_list">
			<li v-for="item in searchedBarItems" v-on:click="addItem(item)">
				<div class="icon_wrapper normal" v-html="Blockbench.getIconNode(item.icon, item.color).outerHTML"></div>
				<div class="icon_wrapper add"><i class="material-icons">add</i></div>
				{{ item.name }}
			</li>
		</ul>

		<div class="dialog_bar button_bar">
			<button type="button" class="cancel_btn confirm_btn uc_btn tl" onclick="hideDialog();">dialog.close</button>
		</div>
		<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
	</dialog>

	<dialog class="dialog draggable paddinged" id="entity_import">
		<div class="dialog_handle tl">dialog.entitylist.title</div>
		<div class="dialog_bar narrow tl">dialog.entitylist.text</div>
			<div class="search_bar">
				<input type="text" class="dark_bordered" id="pe_search_bar" oninput="pe_list._data.search_text = $(this).val().toUpperCase()">
				<i class="material-icons" id="plugin_search_bar_icon">search</i>
			</div>
		<ul id="pe_list" class="list">
			<li v-for="item in searched" v-bind:class="{ selected: item.selected }" v-on:click="selectE(item, $event)" v-on:dblclick="open(item)">
				<img class="pe_icon" v-if="item.icon" v-bind:src="item.icon">
				<div class="pe_icon" v-else></div>
				<h4>{{ item.title }} <span>({{ item.name }})</span></h4>
				<p>{{ item.bonecount+' '+tl('dialog.entitylist.bones') }}, {{ item.cubecount+' '+tl('dialog.entitylist.cubes') }}</p>
			</li>
		</ul>

		<div class="dialog_bar button_bar">
			<button type="button" class="tl confirm_btn" onclick="">dialog.import</button>
			<button type="button" class="cancel_btn tl" onclick="hideDialog();BarItems.close_project.click()">dialog.cancel</button>
		</div>
		<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
	</dialog>

	<dialog class="dialog draggable paddinged" id="image_extruder">
		<div class="dialog_handle tl">dialog.extrude.title</div>
		<h1></h1>

		<div class="dialog_bar">
			<label class="tl">dialog.extrude.mode</label>
			<div class="bar_select f_left">
				<select id="scan_mode" name="scan_mode">
					<option class="tl" id="areas" selected>dialog.extrude.mode.areas</option>
					<option class="tl" id="lines">dialog.extrude.mode.lines</option>
					<option class="tl" id="columns">dialog.extrude.mode.columns</option>
					<option class="tl" id="pixels">dialog.extrude.mode.pixels</option>
				</select>
			</div>
		</div>

		<div class="dialog_bar">
			<label class="tl">dialog.extrude.opacity</label>
			<input class="tool" type="range" id="scan_tolerance" value="255" min="1" max="255">
			<label id="scan_tolerance_label">255</label>
		</div>

		<canvas height="256" width="256" id="extrusion_canvas"></canvas>

		<div class="dialog_bar button_bar">
			<button type="button" class="confirm_btn tl" onclick="Extruder.startConversion()">Scan and Import</button>
			<button type="button" class="cancel_btn tl" onclick="hideDialog()">dialog.cancel</button>
		</div>
		<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
	</dialog>

	<dialog class="dialog draggable paddinged" id="scaling">
		<div class="dialog_handle tl">dialog.scale.title</div>

		<label class="tl">dialog.scale.axis</label>

		<div class="dialog_bar" style="height: 32px;">
			<input type="checkbox" class="toggle_panel" id="model_scale_x_axis" onchange="scaleAll()" checked>
			<label class="toggle_panel" for="model_scale_x_axis">X</label>
			<input type="checkbox" class="toggle_panel" id="model_scale_y_axis" onchange="scaleAll()" checked>
			<label class="toggle_panel" for="model_scale_y_axis">Y</label>
			<input type="checkbox" class="toggle_panel" id="model_scale_z_axis" onchange="scaleAll()" checked>
			<label class="toggle_panel" for="model_scale_z_axis">Z</label>
		</div>

		<label class="tl">data.origin</label>
		<div class="dialog_bar">
			<label for="scaling_origin_x" class="inline_label tl">X</label>
			<input type="number" id="scaling_origin_x" class="dark_bordered medium_width" oninput="scaleAll()">
			<label for="scaling_origin_y" class="inline_label tl">Y</label>
			<input type="number" id="scaling_origin_y" class="dark_bordered medium_width" oninput="scaleAll()">
			<label for="scaling_origin_z" class="inline_label tl">Z</label>
			<input type="number" id="scaling_origin_z" class="dark_bordered medium_width" oninput="scaleAll()">
			<div class="tool" style="float: none" onclick="setScaleAllPivot('origin')">
				<div class="tooltip tl">dialog.scale.element_pivot</div>
				<i class="material-icons">center_focus_strong</i>
			</div>
			<div class="tool" style="float: none" onclick="setScaleAllPivot('selection')">
				<div class="tooltip tl">dialog.scale.selection_center</div>
				<i class="material-icons">filter_tilt_shift</i>
			</div>
		</div>

		<label class="tl">dialog.scale.scale</label>
		<div class="dialog_bar" style="height: 32px;">
			<input type="range" id="model_scale_range" value="1" min="0" max="4" step="0.02" oninput="modelScaleSync()">
			<input type="number" class="f_left dark_bordered" id="model_scale_label" min="0" max="4" step="0.02" value="1" oninput="modelScaleSync(true)">
		</div>

		<div class="dialog_bar narrow" id="scaling_clipping_warning"></div>

		<div class="dialog_bar button_bar">
			<button type="button" onclick="scaleAll(true)" class="confirm_btn tl">dialog.scale.confirm</button>
			<button type="button" class="cancel_btn tl" onclick="cancelScaleAll()">dialog.cancel</button>
			<button type="button" class="minor hidden tl" id="scale_overflow_btn" onclick="scaleAllSelectOverflow()">dialog.scale.select_overflow</button>
		</div>
		<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
	</dialog>

	<dialog class="dialog draggable paddinged" id="create_preset">
		<div class="dialog_handle tl">dialog.display_preset.title</div>
		<div class="dialog_bar tl">dialog.display_preset.message</div>
		<div class="dialog_bar">
			<input type="checkbox" id="thirdperson_righthand_save" checked>
			<label for="thirdperson_righthand_save" class="tl">display.slot.third_right</label>
		</div>
		<div class="dialog_bar">
			<input type="checkbox" id="thirdperson_lefthand_save" checked>
			<label for="thirdperson_lefthand_save" class="tl">display.slot.third_left</label>
		</div>
		<div class="dialog_bar">
			<input type="checkbox" id="firstperson_righthand_save" checked>
			<label for="firstperson_righthand_save" class="tl">display.slot.first_right</label>
		</div>
		<div class="dialog_bar">
			<input type="checkbox" id="firstperson_lefthand_save" checked>
			<label for="firstperson_lefthand_save" class="tl">display.slot.first_left</label>
		</div>
		<div class="dialog_bar">
			<input type="checkbox" id="head_save" checked>
			<label for="head_save" class="tl">display.slot.head</label>
		</div>
		<div class="dialog_bar">
			<input type="checkbox" id="ground_save" checked>
			<label for="ground_save" class="tl">display.slot.ground</label>
		</div>
		<div class="dialog_bar">
			<input type="checkbox" id="fixed_save" checked>
			<label for="fixed_save" class="tl">display.slot.frame</label>
		</div>
		<div class="dialog_bar">
			<input type="checkbox" id="gui_save" checked>
			<label for="gui_save" class="tl">display.slot.gui</label>
		</div>
		<div class="dialog_bar narrow">
			<label class="tl">generic.name</label>
		</div>
		<div class="dialog_bar">
			<input type="text" id="preset_name" class="input_wide" id="new preset">
		</div>
		<div class="dialog_bar button_bar">
			<button type="button" class="tl confirm_btn" onclick="DisplayMode.createPreset()">dialog.display_preset.create</button>
			<button type="button" class="tl cancel_btn" onclick="hideDialog()">dialog.cancel</button>
		</div>
		<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
	</dialog>

	<dialog class="dialog draggable paddinged" id="selection_creator">
		<div class="dialog_handle tl">dialog.select.title</div>

		<div class="dialog_bar">
			<input type="checkbox" id="selgen_new" checked>
			<label class="name_space_left tl" for="selgen_new">dialog.select.new</label>
		</div>

		<div class="dialog_bar">
			<input type="checkbox" id="selgen_group">
			<label class="name_space_left tl" for="selgen_group">dialog.select.group</label>
		</div>

		<div class="dialog_bar">
			<label class="name_space_left tl">dialog.select.name</label>
			<input type="text" class="dark_bordered half" id="selgen_name">
		</div>

		<div class="dialog_bar">
			<label class="name_space_left tl">data.texture</label>
			<input type="text" class="dark_bordered half" id="selgen_texture">
		</div>

		<div class="dialog_bar">
			<label class="name_space_left tl">dialog.select.random</label>
			<input type="range" min="0" max="100" step="1" value="100" class="tool half" id="selgen_random">
		</div>

		<div class="dialog_bar button_bar">
			<button type="button" class="tl confirm_btn" onclick="createSelection()">dialog.select.select</button>
			<button type="button" class="tl cancel_btn" onclick="hideDialog()">dialog.cancel</button>
		</div>
		<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
	</dialog>

	<dialog class="dialog draggable paddinged" id="settings">
		<div class="dialog_handle tl">dialog.settings.settings</div>
		<div class="dialog_bar borderless tab_bar" id="settings_tab_bar">
			<div class="tl tab open" id="setting" onclick="setSettingsTab('setting')">dialog.settings.settings</div>
			<div class="tl tab" id="keybindings" onclick="setSettingsTab('keybindings')">dialog.settings.keybinds</div>
			<div class="tl tab" id="layout_settings" onclick="setSettingsTab('layout_settings')">dialog.settings.theme</div>
			<div class="tl tab" id="credits" onclick="setSettingsTab('credits')">dialog.settings.about</div>
		</div>

		<div id="setting" class="tab_content">
			<h2 class="tl i_b">dialog.settings.settings</h2>

			<div class="search_bar">
				<input type="text" class="dark_bordered" id="settings_search_bar" oninput="Settings.updateSearch()">
				<i class="material-icons" id="settings_search_bar_icon">search</i>
			</div>

			<ul id="settingslist">

				<li v-for="category in structure" v-if="!category.hidden">
					<h3 v-on:click="toggleCategory(category)">
						<i class="material-icons">{{ category.open ? 'expand_more' : 'navigate_next' }}</i>
						{{ category.name }}
					</h3>
					<ul v-if="category.open">

						<li v-for="(setting, key) in category.items" v-if="Condition(setting.condition)" v-on="setting.click ? {click: setting.click} : {}">
							<template v-if="setting.type === 'number'">
								<div class="setting_element"><input type="number" v-model.number="setting.value" :min="setting.min" :max="setting.max" :step="setting.step" v-on:input="saveSettings()"></div>
							</template>
							<template v-else-if="setting.type === 'click'">
								<div class="setting_element setting_icon" v-html="Blockbench.getIconNode(setting.icon).outerHTML"></div>
							</template>
							<template v-else-if="setting.type == 'toggle'"><!--TOGGLE-->
								<div class="setting_element"><input type="checkbox" v-model="setting.value" v-bind:id="'setting_'+key" v-on:click="saveSettings()"></div>
							</template>

							<label class="setting_label" v-bind:for="'setting_'+key">
								<div class="setting_name">{{ setting.name }}</div>
								<div class="setting_description">{{ setting.description }}</div>
							</label>

							<template v-if="setting.type === 'text'">
								<input type="text" class="dark_bordered" style="width: 96%" v-model="setting.value" v-on:input="saveSettings()">
							</template>

							<template v-if="setting.type === 'password'">
								<input :type="setting.hidden ? 'password' : 'text'" class="dark_bordered" style="width: calc(96% - 28px);" v-model="setting.value" v-on:input="saveSettings()">
								<div class="password_toggle" @click="setting.hidden = !setting.hidden;">
									<i class="fas fa-eye-slash" v-if="setting.hidden"></i>
									<i class="fas fa-eye" v-else></i>
								</div>
							</template>

							<template v-else-if="setting.type === 'select'">
								<div class="bar_select">
									<select v-model="setting.value">
										<option v-for="(text, id) in setting.options" v-bind:value="id">{{ text }}</option>
									</select>
								</div>
							</template>
						</li>
					</ul>
				</li>
			</ul>
		</div>

		<div id="keybindings" class="hidden tab_content">
			<h2 class="tl i_b">dialog.settings.keybinds</h2>
			<div class="bar next_to_title" id="keybinds_title_bar"></div>

			<div class="search_bar">
				<input type="text" class="dark_bordered" id="keybind_search_bar" oninput="Keybinds.updateSearch()">
				<i class="material-icons" id="keybind_search_bar_icon">search</i>
			</div>

			<ul id="keybindlist">
				<li v-for="category in structure" v-if="!category.hidden">
					<h3 v-on:click="toggleCategory(category)">
						<i class="material-icons f_left">{{ category.open ? 'expand_more' : 'navigate_next' }}</i>
						{{ category.name }}
						<i class="material-icons f_right" v-if="category.conflict" style="color: var(--color-close);">fiber_manual_record</i>
					</h3>
					<ul v-if="category.open">
						<li v-for="action in category.actions">
							<div v-bind:title="action.description">{{action.name}}</div>
							<div class="keybindslot" :class="{conflict: action.keybind && action.keybind.conflict}" @click.stop="record(action)">{{ action.keybind ? action.keybind.label : '' }}</div>
							<div class="tool" v-on:click="reset(action)">
								<div class="tooltip tl">keybindings.reset</div>
								<i class="material-icons">replay</i>
							</div>
							<div class="tool" v-on:click="clear(action)">
								<div class="tooltip tl">keybindings.clear</div>
								<i class="material-icons">clear</i>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>

		<div id="layout_settings" class="hidden tab_content">
			<h2 class="tl i_b">dialog.settings.theme</h2>
			<div class="bar next_to_title" id="layout_title_bar"></div>
			<div class="y_scrollable" id="theme_editor">
				<div id="color_wrapper">
					<div class="color_field" v-for="(color, key) in colors" :id="'color_field_' + key">
						<div class="layout_color_preview" :style="{'background-color': color}" class="color_input"></div>
						<div class="desc">
							<h4>{{ tl('layout.color.'+key) }}</h4>
							<p>{{ tl('layout.color.'+key+'.desc') }}</p>
						</div>
					</div>
				</div>

				<div class="dialog_bar">
					<label class="name_space_left tl" for="layout_font_main">layout.font.main</label>
					<input style="font-family: var(--font-main)" type="text" class="half dark_bordered" id="layout_font_main" v-model="main_font">
				</div>

				<div class="dialog_bar">
					<label class="name_space_left tl" for="layout_font_headline">layout.font.headline</label>
					<input style="font-family: var(--font-headline)" type="text" class="half dark_bordered" id="layout_font_headline" v-model="headline_font">
				</div>
				<div class="dialog_bar">
					<label class="name_space_left tl" for="layout_font_cpde">layout.font.code</label>
					<input style="font-family: var(--font-code)" type="text" class="half dark_bordered" id="layout_font_cpde" v-model="code_font">
				</div>
				<h4 class="tl i_b">layout.css</h4>
				<div id="css_editor">
					<vue-prism-editor v-model="css" language="css" :line-numbers="true" />
				</div>

			</div>

		</div>
		<div id="credits" class="hidden tab_content">
			<h2 class="tl i_b">dialog.settings.about</h2>
			<div id="about_page_title">
				<i class="icon-blockbench_inverted"></i>
				<span>Blockbench</span>
			</div>
			<p><b class="tl">about.version</b> <span id="version_tag"></span></p>
			<p><b class="tl">about.creator</b> JannisX11</p>
			<p><b class="tl">about.website</b> <a class="open-in-browser" href="http://blockbench.net">blockbench.net</a></p>
			<p><b class="tl">about.bugtracker</b> <a class="open-in-browser" href="https://github.com/JannisX11/blockbench/issues">github.com/JannisX11/blockbench</a></p>
			<p class="local_only tl">about.electron</p>
			<p class="tl">about.vertex_snap</p>
			<p><b class="tl">about.icons</b> <a href="https://material.io/icons/" class="open-in-browser">material.io/icons</a> &amp; <a href="http://fontawesome.io/icons/" class="open-in-browser">fontawesome</a></p>
			<p><b class="tl">about.libraries</b>
				<a class="open-in-browser" href="https://jquery.com">jQuery</a>,
				<a class="open-in-browser" href="https://jqueryui.com">jQuery UI</a>,
				<a class="open-in-browser" href="http://touchpunch.furf.com">jQuery UI Touch Punch</a>,
				<a class="open-in-browser" href="https://vuejs.org">VueJS</a>,
				<a class="open-in-browser" href="https://github.com/weibangtuo/vue-tree">Vue Tree</a>,
				<a class="open-in-browser" href="https://github.com/sagalbot/vue-sortable">Vue Sortable</a>,
				<a class="open-in-browser" href="https://threejs.org">ThreeJS</a>,
				<a class="open-in-browser" href="https://github.com/oliver-moran/jimp">Jimp</a>,
				<a class="open-in-browser" href="https://bgrins.github.io/spectrum">Spectrum</a>,
				<a class="open-in-browser" href="https://github.com/jnordberg/gif.js">gif.js</a>,
				<a class="open-in-browser" href="https://stuk.github.io/jszip/">JSZip</a>,
				<a class="open-in-browser" href="https://github.com/rotemdan/lzutf8.js">LZ-UTF8</a>,
				<a class="open-in-browser" href="https://github.com/markedjs/marked">Marked</a>
			</p>
		</div>

		<div class="dialog_bar button_bar" hidden>
			<button type="button" class="confirm_btn cancel_btn tl" onclick="Settings.save()">dialog.close</button>
		</div>
		<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
	</dialog>

	<dialog class="dialog draggable" id="uv_dialog">
		<div class="dialog_handle tl">uv_editor.title</div>
		<div class="dialog_bar borderless tab_bar" id="uv_tab_bar">
			<div onclick="uv_dialog.openTab('all')" id="all" class="tab open tl">uv_editor.all_faces</div>
			<div onclick="uv_dialog.openTab('north')" id="north" class="tab tl">face.north</div>
			<div onclick="uv_dialog.openTab('south')" id="south" class="tab tl">face.south</div>
			<div onclick="uv_dialog.openTab('west')" id="west" class="tab tl">face.west</div>
			<div onclick="uv_dialog.openTab('east')" id="east" class="tab tl">face.east</div>
			<div onclick="uv_dialog.openTab('up')" id="up" class="tab tl">face.up</div>
			<div onclick="uv_dialog.openTab('down')" id="down" class="tab tl">face.down</div>
		</div>
		<div id="uv_dialog_all" class="uv_dialog_content uv_dialog_all_only">
		</div>

		<div id="uv_dialog_single" class="uv_dialog_content">
		</div>

		<div class="bar" id="uv_dialog_toolbar">
			<div class="toolbar_wrapper uv_dialog"></div>
		</div>

		<div class="dialog_bar button_bar">
			<button type="button" onclick="hideDialog()" class="confirm_btn cancel_btn hidden">dialog.close</button>
		</div>
		
		<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
	</dialog>

	<dialog class="dialog draggable paddinged" id="text_input">
		<div class="dialog_handle tl">dialog.input.title</div>

		<div class="dialog_bar">
			<input type="text" id="text_input_field" class="dark_bordered input_wide">
		</div>

		<div class="dialog_bar button_bar">
			<button type="button" class="confirm_btn tl" onclick="hideDialog()">dialog.confirm</button>
			<button type="button" class="cancel_btn tl" onclick="hideDialog()">dialog.cancel</button>
		</div>
		<div class="dialog_close_button" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"><i class="material-icons">clear</i></div>
	</dialog>

	<div id="plugin_dialog_wrapper"></div>

	<header>
		<ul id="mac_window_menu" hidden></ul>
		<div id="title" class="app-drag-region">
			<span>Blockbench</span>
			<i class="icon-blockbench_inverted"></i>
		</div>
		<ul id="menu_bar" class="scroll_horizontal"></ul>
		<div class="app-drag-region" id="header_free_bar"></div>
		<ul id="windows_window_menu" hidden>
			<li onclick="currentwindow.minimize()"><i class="material-icons" style="margin-top: 4px;">remove</i></li>
			<li onclick="currentwindow.isMaximized() ? currentwindow.unmaximize() : currentwindow.maximize()"><i class="material-icons">crop_square</i><!--🗖--></li>
			<li class="wwm_r" onclick="currentwindow.close()"><i class="material-icons">clear</i></li>
		</ul>
		<button id="web_download_button" hidden><a class="tl" href="https://blockbench.net/downloads">web.download_app</a></button>
	</header>

	<div id="page_wrapper" class="hidden">

	<dialog id="action_selector" v-if="open">
		<input type="text" v-model="search_input" autocomplete="off" autosave="off" autocorrect="off" spellcheck="off" autocapitalize="off">
		<i class="material-icons" id="action_search_bar_icon">search</i>
		<div>
			<ul>
				<li v-for="(item, i) in actions" v-on:click="ActionControl.click(item, $event)" v-bind:class="{selected: i === index}" v-on:mouseenter="index = i">
					<div class="icon_wrapper normal" v-html="Blockbench.getIconNode(item.icon, item.color).outerHTML"></div>
					<div class="name">{{ item.name }}</div>
					<label>{{ item.keybind.label }}</label>
				</li>
			</ul>
			<div class="small_text" v-if="actions[index]">{{ Pressing.alt ? actions[index].keybind.label : actions[index].description }}</div>
		</div>
	</dialog>

	<div id="blackout" onclick="$('.dialog#'+open_dialog).find('.cancel_btn:not([disabled])').click()"></div>

	<div id="main_toolbar">
		<div style="color: #fff; text-align: center; font-family: segoe ui, sans-serif;" id="no_css_message">
			<br><h1>Oops...</h1>
			<p>It looks like your internet connection was too unstable to automatically update Blockbench.</p>
			<p>Download and run <a style="color: #75b1ff" href="https://blockbench.net/downloads/">the installer</a> to update manually. Your custom settings will remain untouched.</p>
		</div>
		<div class="toolbar_wrapper narrow tools"></div>
		<div class="toolbar_wrapper narrow mobile_side"></div>

		<div class="toolbar_wrapper narrow tool_options"></div>
		<ul id="mode_selector">
			<li
				v-for="mode in options"
				v-if="Condition(mode.condition)"
				v-bind:class="{selected: mode.selected}"
				v-on:click="mode.select()"
			>{{ mode.name }}</li>
		</ul>
	</div>
	<div id="left_bar" class="sidebar">

		<div id="uv" class="panel selection_only">
			<div class="bar next_to_title" id="uv_title_bar">
				<div id="project_resolution_status" onclick="BarItems.project_window.trigger()"></div>
			</div>
			<div id="uv_panel_sides" onclick="main_uv.loadSelectedFace()" class="bar tabs_small">

				<input type="radio" name="side" id="north_radio" checked>
				<label class="tl" for="north_radio">face.north</label>

				<input type="radio" name="side" id="south_radio">
				<label class="tl" for="south_radio">face.south</label>
				
				<input type="radio" name="side" id="west_radio">
				<label class="tl" for="west_radio">face.west</label>

				<input type="radio" name="side" id="east_radio">
				<label class="tl" for="east_radio">face.east</label>

				<input type="radio" name="side" id="up_radio">
				<label class="tl" for="up_radio">face.up</label>

				<input type="radio" name="side" id="down_radio">
				<label class="tl" for="down_radio">face.down</label>
			</div>
		</div>

		<div id="display" class="panel">
			<div class="toolbar_wrapper display"></div>
			<p class="tl">display.slot</p>
			<div id="display_bar" class="bar tabs_small icon_bar">
				<input class="hidden" type="radio" name="display" id="thirdperson_righthand" checked>
				<label class="tool" for="thirdperson_righthand" onclick="DisplayMode.loadThirdRight()"><div class="tooltip tl">display.slot.third_right</div><i class="material-icons">accessibility</i></label>
				<input class="hidden" type="radio" name="display" id="thirdperson_lefthand">
				<label class="tool" for="thirdperson_lefthand" onclick="DisplayMode.loadThirdLeft()"><div class="tooltip tl">display.slot.third_left</div><i class="material-icons">accessibility</i></label>

				<input class="hidden" type="radio" name="display" id="firstperson_righthand">
				<label class="tool" for="firstperson_righthand" onclick="DisplayMode.loadFirstRight()"><div class="tooltip tl">display.slot.first_right</div><i class="material-icons">person</i></label>
				<input class="hidden" type="radio" name="display" id="firstperson_lefthand">
				<label class="tool" for="firstperson_lefthand" onclick="DisplayMode.loadFirstLeft()"><div class="tooltip tl">display.slot.first_left</div><i class="material-icons">person</i></label>

				<input class="hidden" type="radio" name="display" id="head">
				<label class="tool" for="head" onclick="DisplayMode.loadHead()"><div class="tooltip tl">display.slot.head</div><i class="material-icons">sentiment_satisfied</i></label>

				<input class="hidden" type="radio" name="display" id="ground">
				<label class="tool" for="ground" onclick="DisplayMode.loadGround()"><div class="tooltip tl">display.slot.ground</div><i class="icon-ground"></i></label>

				<input class="hidden" type="radio" name="display" id="fixed">
				<label class="tool" for="fixed" onclick="DisplayMode.loadFixed()"><div class="tooltip tl">display.slot.frame</div><i class="material-icons">filter_frames</i></label>

				<input class="hidden" type="radio" name="display" id="gui">
				<label class="tool" for="gui" onclick="DisplayMode.loadGUI()"><div class="tooltip tl">display.slot.gui</div><i class="material-icons">border_style</i></label>
			</div>
			<p class="reference_model_bar tl">display.reference</p>
			<div id="display_ref_bar" class="bar tabs_small reference_model_bar">
			</div>

			<div id="display_sliders">
				
				<p class="tl">display.rotation</p><div class="tool head_right" v-on:click="resetChannel('rotation')"><i class="material-icons">replay</i></div>
				<div class="bar slider_input_combo" v-for="axis in axes">
					<input type="range" class="tool disp_range" v-model.number="slot.rotation[axis]" v-bind:trigger_type="'rotation.'+axis"
						min="-180" max="180" step="1" value="0"
						@input="change(axis, 'rotation')" @mousedown="start" @change="save">
					<input lang="en" type="number" class="tool disp_text" v-model.number="slot.rotation[axis]" min="-180" max="180" step="0.5" value="0" @input="change(axis, 'rotation');save()" @mousedown="start">
					<div class="color_corner" :style="{'border-color': `var(--color-axis-${getAxisLetter(axis)})`}"></div>
				</div>
				
				<p class="tl">display.translation</p><div class="tool head_right" v-on:click="resetChannel('translation')"><i class="material-icons">replay</i></div>
				<div class="bar slider_input_combo" v-for="axis in axes">
					<input type="range" class="tool disp_range" v-model.number="slot.translation[axis]" v-bind:trigger_type="'translation.'+axis"
						v-bind:min="Math.abs(slot.translation[axis]) < 10 ? -20 : (slot.translation[axis] > 0 ? -70*3+10 : -80)"
						v-bind:max="Math.abs(slot.translation[axis]) < 10 ?  20 : (slot.translation[axis] < 0 ? 70*3-10 : 80)"
						v-bind:step="Math.abs(slot.translation[axis]) < 10 ? 0.25 : 1"
						value="0" @input="change(axis, 'translation')" @mousedown="start" @change="save">
					<input lang="en" type="number" class="tool disp_text" v-model.number="slot.translation[axis]" min="-80" max="80" step="0.5" value="0" @input="change(axis, 'translation');save()" @mousedown="start">
					<div class="color_corner" :style="{'border-color': `var(--color-axis-${getAxisLetter(axis)})`}"></div>
				</div>

				<p class="tl">display.scale</p><div class="tool head_right" v-on:click="resetChannel('scale')"><i class="material-icons">replay</i></div>
				<div class="bar slider_input_combo" v-for="axis in axes">
					<div class="tool display_scale_invert" v-on:click="invert(axis)">
						<div class="tooltip tl">display.mirror</div>
						<i class="material-icons">{{ slot.mirror[axis] ? 'check_box' : 'check_box_outline_blank' }}</i>
					</div>
					<input type="range" class="tool disp_range scaleRange" v-model.number="slot.scale[axis]" v-bind:trigger_type="'scale.'+axis" v-bind:id="'scale_range_'+axis"
						v-bind:min="slot.scale[axis] > 1 ? -2 : 0"
						v-bind:max="slot.scale[axis] > 1 ? 4 : 2"
						step="0.01"
						value="0" @input="change(axis, 'scale')" @mousedown="start" @change="save">
					<input type="number" class="tool disp_text" v-model.number="slot.scale[axis]" min="0" max="4" step="0.01" value="0" @input="change(axis, 'scale');save()" @mousedown="start">
					<div class="color_corner" :style="{'border-color': `var(--color-axis-${getAxisLetter(axis)})`}"></div>
				</div>
			</div>
		</div>


		<div id="keyframe" class="panel">
			<div class="toolbar_wrapper keyframe"></div>
			<p class="tl" id="keyframe_type_label"></p>
			<div class="bar flex" id="keyframe_bar_x">
				<label class="color_x" style="font-weight: bolder">X</label>
				<input type="text" id="keyframe_x" class="dark_bordered code keyframe_input tab_target" axis="x" oninput="updateKeyframeValue(this)">
			</div>
			<div class="bar flex" id="keyframe_bar_y">
				<label class="color_y" style="font-weight: bolder">Y</label>
				<input type="text" id="keyframe_y" class="dark_bordered code keyframe_input tab_target" axis="y" oninput="updateKeyframeValue(this)">
			</div>
			<div class="bar flex" id="keyframe_bar_z">
				<label class="color_z" style="font-weight: bolder">Z</label>
				<input type="text" id="keyframe_z" class="dark_bordered code keyframe_input tab_target" axis="z" oninput="updateKeyframeValue(this)">
			</div>
			<div class="bar flex" id="keyframe_bar_w">
				<label>W</label>
				<input type="text" id="keyframe_w" class="dark_bordered code keyframe_input tab_target" axis="w" oninput="updateKeyframeValue(this)">
			</div>
			<div class="bar flex" id="keyframe_bar_effect">
				<label class="tl">data.effect</label>
				<input type="text" id="keyframe_effect" class="dark_bordered code keyframe_input tab_target" axis="effect" oninput="updateKeyframeValue(this)">
			</div>
			<div class="bar flex" id="keyframe_bar_locator">
				<label class="tl">data.locator</label>
				<input type="text" id="keyframe_locator" class="dark_bordered code keyframe_input tab_target" axis="locator" oninput="updateKeyframeValue(this)">
			</div>
			<div class="bar flex" id="keyframe_bar_script">
				<label class="tl">timeline.pre_effect_script</label>
				<input type="text" id="keyframe_script" class="dark_bordered code keyframe_input tab_target" axis="script" oninput="updateKeyframeValue(this)">
			</div>
			<div class="bar" id="keyframe_bar_instructions">
				<label class="tl">timeline.timeline</label>
				<textarea id="keyframe_instructions" style="height: 90px;" class="code keyframe_input tab_target" axis="instructions" oninput="updateKeyframeValue(this)"></textarea>
			</div>
		</div>

		<div id="variable_placeholders" class="panel grow">
			<p class="tl">panel.variable_placeholders.info</p>
			<textarea id="var_placeholder_area" class="code tab_target" style="flex-grow: 1;" onkeyup="Animator.preview()"></textarea>
		</div>

		<div id="textures" class="panel grow">
			<div class="toolbar_wrapper texturelist"></div>
			<ul id="texture_list" class="list">
				<li
					v-for="texture in textures"
					v-bind:class="{ selected: texture.selected, particle: texture.particle}"
					v-bind:texid="texture.uuid"
					:key="texture.uuid"
					class="texture"
					v-on:click.stop="texture.select($event)"
					v-on:dblclick="texture.openMenu($event)"
					@contextmenu.prevent.stop="texture.showContextMenu($event)"
				>
					<div class="texture_icon_wrapper">
						<img v-bind:texid="texture.id" v-bind:src="texture.source" class="texture_icon" width="48px" alt="" v-if="texture.show_icon" />
						<i class="material-icons texture_error" v-bind:title="texture.getErrorMessage()" v-if="texture.error">error_outline</i>
						<i class="texture_movie fa fa_big fa-film" title="Animated Texture" v-if="texture.frameCount > 1"></i>
					</div>
					<div class="texture_description_wrapper">
						<div class="texture_name">{{ texture.name }}</div>
						<div class="texture_res">{{ texture.error
							? texture.getErrorMessage()
							: texture.width + ' x ' + texture.height + 'px'
						}}</div>
					</div>
					<i class="material-icons texture_visibility_icon" v-if="texture.particle">bubble_chart</i>
					<i class="material-icons texture_particle_icon clickable"
						v-bind:class="{icon_off: !texture.visible}"
						v-if="Project.layered_textures"
						@click="texture.toggleVisibility()"
						@dblclick.stop
					>
						{{ texture.visible ? 'visibility' : 'visibility_off' }}
					</i>
					<i class="material-icons texture_save_icon" v-bind:class="{clickable: !texture.saved}" @click="texture.save()">
						<template v-if="texture.saved">check_circle</template>
						<template v-else>save</template>
					</i>
				</li>
			</ul>
		</div>
	</div>
	<div id="right_bar" class="sidebar">

		<div id="element" class="panel selection_only">
			<p class="tl">panel.element.position</p>
			<div class="toolbar_wrapper element_position"></div>
			<p class="tl">panel.element.size</p>
			<div class="toolbar_wrapper element_size"></div>
			<p class="tl">panel.element.origin</p>
			<div class="toolbar_wrapper element_origin"></div>
			<p class="tl">panel.element.rotation</p>
			<div class="toolbar_wrapper element_rotation"></div>
		</div>

		<div id="color" class="panel">
			<div id="color_panel_wrapper">
				<div id="color_panel_head">
					<div class="main" v-bind:style="{'background-color': hover_color || main_color}"></div>
					<div class="side">
						<input type="text" v-model="color_code" @focusout="validateMainColor()">
						<div id="color_history">
							<li
								v-for="(color, i) in history" v-if="i || color != main_color"
								:key="color"
								v-bind:style="{'background-color': color}"
								v-bind:title="color" @click="setColor(color)"
							></li>
						</div>
					</div>
				</div>

				<div id="uv_panel_sides" onclick="main_uv.loadSelectedFace()" class="bar tabs_small">

					<input type="radio" name="tab" id="radio_color_picker" value="picker" v-model="open_tab">
					<label class="tl" for="radio_color_picker">panel.color.picker</label>

					<input type="radio" name="tab" id="radio_color_palette" value="palette" v-model="open_tab">
					<label class="tl" for="radio_color_palette">panel.color.palette</label>

					<input type="radio" name="tab" id="radio_color_both" value="both" v-model="open_tab">
					<label class="tl" for="radio_color_both">panel.color.both</label>

				</div>
				<div v-show="open_tab == 'picker' || open_tab == 'both'">
					<input id="main_colorpicker">
					<div class="toolbar_wrapper color_picker"></div>
				</div>
				<div v-show="open_tab == 'palette' || open_tab == 'both'">
					<div class="toolbar_wrapper palette"></div>
					<ul id="palette_list" class="list" v-sortable="{onUpdate: sort, onEnd: drop, fallbackTolerance: 10}" @contextmenu="ColorPanel.menu.open($event)">
						<li
							class="color" v-for="color in palette"
							:title="color" :key="color"
							:class="{selected: color == main_color, contrast: isDarkColor(color)}"
							@click="setColor(color)"
							@mouseenter="hover_color = color"
							@mouseleave="hover_color = ''"
						>
							<div class="color_inner" v-bind:style="{'background-color': color}"></div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div id="outliner" class="panel grow">
			<div class="toolbar_wrapper outliner"></div>
			<ul id="cubes_list" class="list">
				<vue-tree :option="option"></vue-tree>
			</ul>
		</div>
	</div>
	<div id="center">
		<div id="preview">
		</div>
		<div id="timeline">
			<div class="toolbar_wrapper timeline"></div>
			<div id="timeline_vue">
				<div id="timeline_header">
					<div id="timeline_corner" v-bind:style="{width: head_width+'px'}"></div>
					<div id="timeline_time_wrapper">
						<div id="timeline_time" v-bind:style="{width: (size*length)+'px', left: -scroll_left+'px'}">
							<div v-for="t in timecodes" class="timeline_timecode" v-bind:style="{left: (t.time * size) + 'px', width: (t.width * size) + 'px'}">
								<span>{{ t.text }}</span>
								<div class="substeps">
									<div v-for="n in Math.ceil(t.substeps)"></div>
								</div>
							</div>
							<div id="timeline_playhead"
								v-bind:style="{left: (playhead * size) + 'px'}"
							></div>
							<div id="timeline_endbracket"
								v-bind:style="{left: (animation_length * size) + 'px'}"
							></div>
							<div
								v-for="marker in markers"
								class="timeline_marker"
								v-bind:style="{left: (marker.time * size) + 'px', 'border-color': markerColors[marker.color].standard}"
								@contextmenu.prevent="marker.showContextMenu($event)"
								v-on:click="marker.callPlayhead()"
							></div>
						</div>
					</div>
				</div>
				<div id="timeline_body">
					<div id="timeline_body_inner" v-bind:style="{width: (size*length + head_width)+'px'}" @contextmenu.stop="Timeline.showMenu($event)">
						<li v-for="animator in animators" class="animator" :class="{selected: animator.selected}" :uuid="animator.uuid" v-on:click="animator.select();">
							<div class="animator_head_bar">
								<div class="channel_head" v-bind:style="{left: scroll_left+'px', width: head_width+'px'}"  v-on:dblclick.stop="toggleAnimator(animator)">
									<div class="text_button" v-on:click.stop="toggleAnimator(animator)">
										<i class="icon-open-state fa" v-bind:class="{'fa-angle-right': !animator.expanded, 'fa-angle-down': animator.expanded}"></i>
									</div>
									<span v-on:click.stop="animator.select();">{{animator.name}}</span>
									<div class="text_button" v-on:click.stop="removeAnimator(animator)">
										<i class="material-icons">remove</i>
									</div>
								</div>
								<div class="keyframe_section" v-if="!animator.expanded">
									<keyframe
										v-for="keyframe in animator.keyframes"
										v-bind:style="{left: (8 + keyframe.time * size) + 'px'}"
										class="keyframe"
										v-bind:id="'_'+keyframe.uuid"
									>
										<i class="material-icons">lens</i>
									</keyframe>
								</div>
							</div>
							<div class="animator_channel_bar"
								v-bind:style="{width: (size*length + head_width)+'px'}"
								v-for="channel in animator.channels"
								v-if="animator.expanded && (!focus_channel || channel == focus_channel || focus_channel == 'used' && animator[channel].length)"
							>
								<div class="channel_head" v-bind:style="{left: scroll_left+'px', width: head_width+'px'}">
									<div class="text_button" v-on:click.stop="animator.toggleMuted(channel)">
										<template v-if="channel === 'sound'">
											<i class="channel_mute fas fa-volume-mute" v-if="animator.muted[channel]"></i>
											<i class="channel_mute fas fa-volume-up" v-else></i>
										</template>
										<template v-else-if="channel !== 'timeline'">
											<i class="channel_mute fas fa-eye-slash" v-if="animator.muted[channel]"></i>
											<i class="channel_mute fas fa-eye" v-else></i>
										</template>
									</div>
									<span>{{ tl('timeline.'+channel) }}</span>
									<div class="text_button" v-on:click.stop="animator.createKeyframe(null, Timeline.time, channel, true)">
										<i class="material-icons">add</i>
									</div>
								</div>
								<div class="keyframe_section">
									<keyframe
										v-for="keyframe in animator[channel]"
										v-bind:style="{left: (8 + keyframe.time * size) + 'px'}"
										class="keyframe"
										v-bind:class="[keyframe.channel, keyframe.selected?'selected':'']"
										v-bind:id="keyframe.uuid"
										v-on:click.stop="keyframe.select($event)"
										v-on:dblclick="keyframe.callPlayhead()"
										:title="tl('timeline.'+keyframe.channel)"
										@contextmenu.prevent="keyframe.showContextMenu($event)"
									>
										<i class="material-icons">stop</i>
									</keyframe>
								</div>
							</div>
						</li>
						<div id="timeline_empty_head" class="channel_head" v-bind:style="{left: scroll_left+'px', width: head_width+'px'}">
						</div>
						<div id="timeline_selector" class="selection_rectangle"></div>
					</div>
				</div>
			</div>
		</div>
		<div id="start_screen">
			<content>
				<section id="start-files">
					<left>
						<h2 class="tl">mode.start.new</h2>
						<div class="bar next_to_title" id="uv_title_bar">
							<div class="tool" onclick="Blockbench.openLink('https://blockbench.net/quickstart/')">
								<div class="tooltip tl">menu.help.quickstart</div>
								<i class="fas fa-question-circle"></i>
							</div>
						</div>
						<ul>
							<li v-for="format in formats" v-if="format.show_on_start_screen" v-on:click="format.new()">
								<span class="icon_wrapper f_left" v-html="Blockbench.getIconNode(format.icon).outerHTML"></span>
								<h3>{{ format.name }}</h3>
								<p>{{ format.description }}</p>
							</li>
						</ul>
					</left>
					<right>
						<h2 class="tl">mode.start.recent</h2>
						<div id="start_screen_list_type" v-if="isApp && !redact_names">
							<li class="tool" v-bind:class="{selected: list_type == 'list'}" v-on:click="setListType('list')">
								<i class="material-icons">list</i>
							</li>
							<li class="tool" v-bind:class="{selected: list_type == 'grid'}" v-on:click="setListType('grid')">
								<i class="material-icons">view_module</i>
							</li>
						</div>
						<div v-if="redact_names">{{ '['+tl('generic.redacted')+']' }}</div>
						<ul v-else-if="list_type == 'list'">
							<li v-on:click="openProject(project, $event)" v-for="project in recent" v-key="project.path" v-bind:title="redact_names ? '' : project.path" class="recent_project">
								<span class="icon_wrapper" v-html="Blockbench.getIconNode(project.icon).outerHTML"></span>
								<span class="recent_project_name">{{ redact_names ? `[${tl('generic.redacted')}]` : project.name }}</span>
								<span class="recent_project_date">{{ getDate(project) }}</span>
							</li>
							<div v-if="recent.length == 0">{{ tl('mode.start.no_recents') }}</div>
						</ul>
						<ul :class="{redact: redact_names}" v-else>
							<li v-on:click="openProject(project, $event)" v-for="project in recent" v-key="project.path" v-bind:title="redact_names ? '' : project.path" class="recent_project thumbnail">
								<div class="thumbnail_image" :style="{'background-image': getThumbnail(project.path)}"></div>
								<span class="recent_project_name">{{ redact_names ? `[${tl('generic.redacted')}]` : project.name }}</span>
								<span class="icon_wrapper" v-html="Blockbench.getIconNode(project.icon).outerHTML"></span>
							</li>
							<div v-if="recent.length == 0">{{ tl('mode.start.no_recents') }}</div>
						</ul>
						<button class="tl" style="margin-top: 20px;" onclick="BarItems.open_model.trigger()">action.open_model</button>
					</right>
				</section>
			</content>
		</div>
	</div>
	<div id="status_bar" @contextmenu="Interface.status_bar.menu.show(event)">
		
		<div class="f_left" v-if="settings.streamer_mode.value"
			style="background-color: var(--color-stream); color: var(--color-light);"
			@click="Settings.open({search: 'streamer_mode'})"
			v-bind:title="tl('interface.streamer_mode_on')"
		>
			<i class="material-icons">live_tv</i>
		</div>
		<div id="status_saved">
			<i class="material-icons" v-if="Prop.project_saved" v-bind:title="tl('status_bar.saved')">check</i>
			<i class="material-icons" v-else v-bind:title="tl('status_bar.unsaved')">close</i>
		</div>
		<div v-html="Blockbench.getIconNode(Format.icon).outerHTML" v-bind:title="Format.name"></div>
		<div v-if="Prop.recording" v-html="Blockbench.getIconNode('fiber_manual_record').outerHTML" style="color: var(--color-close)" v-bind:title="tl('status_bar.recording')"></div>


		<div id="status_name">
			{{ Prop.file_name }}
		</div>
		<div id="status_message" class="hidden"></div>
		<div class="f_right">
			{{ Prop.zoom }}%
		</div>
		<div class="f_right">
			{{ Prop.fps }} FPS
		</div>
		<div class="f_right" v-if="Prop.session">
			{{ Prop.connections }} Clients
		</div>
		<div id="status_progress" v-if="Prop.progress" v-bind:style="{width: Prop.progress*100+'%'}"></div>
	</div>
	
	</div>
	
	<script src="js/boot_loader.js"></script>
	<script>
		if (!Blockbench || !Blockbench.setup_successful) {
			document.getElementById('loading_error_message').style.display = 'block'
			if (typeof require !== undefined) {
				require('electron').remote.getCurrentWindow().webContents.openDevTools()
			}
		} else {
			document.getElementById('loading_error_message').innerHTML = 'No loading errors...'
		}
	</script>
</body>
</html>